box-shadow
drop-shadow
revision:
<div>
<div class="gradient-border" id="box">Animated CSS Gradient Border</div>
</div>
<style>
#box {display: flex; align-items: center; justify-content: center; width: 60vw; height: 20vw; color: white; font-family: 'Raleway'; font-size: 2.5vw; margin-left: 5vw;}
.gradient-border {--borderWidth: 0.5vw; background: #1D1F20; position: relative; border-radius: var(--borderWidth);}
.gradient-border:after {content: ''; position: absolute; top: calc(-1 * var(--borderWidth));left: calc(-1 * var(--borderWidth)); height: calc(100% + var(--borderWidth) * 2);
width: calc(100% + var(--borderWidth) * 2); background: linear-gradient(60deg, black, yellow, red); border-radius: calc(2 * var(--borderWidth)); z-index: -1;
animation: animatedgradient 3s ease alternate infinite; background-size: 300% 300%;}
@keyframes animatedgradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
</style>
<div>
<div class="module-border-wrap">
<div class="module">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos
tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde
reprehenderit ea molestias.
</div>
</div>
</div>
<style>
.module-border-wrap {max-width: 55vw; padding: 1vw; position: relative; background: linear-gradient(to right, red, yellow, black); padding: 1vw;margin-left:5vw;}
.module {background: lightblue; color: brown; padding: 2vw;}
</style>
<div>
<section>
<div class="container">
<div class="background-img">
<div class="box_1">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h3>My animated Border </h3>
<p class="spec"><a href="1.jpg" style="color:#00ffe9;" target="_blank">All our modules
are designed to play nicely with responsive of course. At the end of the day it comes down
to the theme you use - our code doesn't get in your way.</a></p>
</div>
</div>
</div>
</div>
</section>
</div>
<style>
.container{padding-top: 2vw; padding-bottom: 2vw;}
.background-img{ background-image: url("../images/1.jpg"); height: 20vw; width: 30vw; background-repeat: no-repeat; background-size: cover; margin: 5% auto; padding:2vw; border: 1vw solid #2a3cad;
border-radius: 0.5vw; box-shadow: 0vw 0vw 0.5vw #2a3cad; position: relative; }
.content h3{ font-size:1.25vw;}
.box_1{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20vw; height: 20vw; background: #111845a6; box-sizing: border-box; overflow: hidden;
box-shadow: 0 2vw 5vw rgb(23, 32, 90); border: 0.2vw solid #2a3cad; color: white; padding: 2vw; }
.box_1:before{content: ''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: rgba(255,255,255,0.1); transition:0.5s; pointer-events: none;}
.box_1:hover:before{left:-50%; transform: skewX(-5deg);}
.box_1 .content{ position:absolute; top:1vw; left:0.5vw; right:0.5vw; bottom:1vw; border:0.2vw solid #f0a591; padding:1vw; text-align:center; box-shadow: 0 0.5vw 1vw rgba(9,0,0,0.5);}
.box_1 span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;box-sizing: border-box;}
.box_1 span:nth-child(1){transform:rotate(0deg);}
.box_1 span:nth-child(2){transform:rotate(90deg);}
.box_1 span:nth-child(3){transform:rotate(180deg);}
.box_1 span:nth-child(4){transform:rotate(270deg);}
.box_1 span:before {content: ''; position: absolute; width:100%; height: 0.2vw;background: #50dfdb; animation: animating 4s linear infinite;}
@keyframes animating {
0% {transform:scaleX(0);transform-origin: left;}
50%{transform:scaleX(1);transform-origin: left;}
50.1%{transform:scaleX(1); transform-origin: right;}
100%{transform:scaleX(0);transform-origin: right;}
}
</style>
<div>
<div>
<button class="border-button"></button>
</div>
<style>
.border-button {width: 2v2; height:2vw; outline: solid 1vw #FC5185; transition: outline 0.6s linear; margin: 5vw;}
.border-button:hover{ outline-width: 5vw;}
</style>
</div>
<style>
.border-button-2 {width: 20vw; height: 10vw; border: solid 1vw #FC5185; clip-path: polygon(calc(0% + 0.1vw) calc(0% + 0.1vw) /* top left */, calc(100% - 0.1vw)
calc(0% + 0.1vw) /* top right */, calc(100% - 0.1vw) calc(100% - 0.1vw) /* bottom right */, calc(0% + 0.1vw) calc(100% - 0.1vw) /* bottom left */);
transition: clip-path 0.6s linear; margin: 1vw;}
.border-button-2:hover {clip-path: polygon(0 0, 20% 0, 20% 20%, 0 20%);}
</style>
<div>
<button class="border-button-2"></button>
</div>
.box{margin: 5vw; width: 50vw; height: 20vw; margin-left: 10vw; background-color: lightgrey; position: relative; box-shadow: 1vw 1vw 4.2vw 0 rgba(0,0,0,0.75);}
.box:after, .box:before{mix-blend-mode:multiply; filter:none; z-index: -1; content:''; width:calc(100% + (5vw * 2)); height:calc(100% + (5vw * 2)); position: absolute; display: block;
animation: border 10s ease-in-out infinite; transform:translateX(-5vw) translateY(-5vw);}
@keyframes border {
0%, 100% { -webkit-clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
clip-path: polygon (0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + 33.3333333333px)) calc(100% - (33.3333333333px)); }
50% {-webkit-clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)),
100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%); clip-path:
polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.
3333333333px)) calc(100% - (33.3333333333px)), 0 100%); }
}
.box:after{ animation-delay: -5s; background-color: #93e1d8; clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px))
calc(100% - (33.3333333333px)));}
.box:before { background-color: #AA4465; clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)),
0 100%);}
.box:hover:after{animation-delay: -0.1s;}
.box:hover:before, .box:hover:after {animation-duration: 0.2s;}
<div class="guess">
<h3>my simple animation</h3>
</div>
<style>
.guess {padding: 0; position: relative; width: 55vw; height: 5vw;text-align: center; background: green; margin-left: 2vw;}
.guess h3 {position: relative; color: red;}
.guess::before {content: ""; position: absolute; top: -0.1vw; left: -0.1vw; width: 0; height: 0; background: transparent; border: 0.2vw solid transparent;}
.guess:hover::before {animation: animate 1s linear forwards;}
@keyframes animate {
0% {width: 0; height: 0; border-top-color: black; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
50% {width: 100%; height: 0; border-top-color: black; border-right-color: black; border-bottom-color: transparent; border-left-color: transparent; }
100% {width: 100%; height: 100%; border-top-color: black; border-right-color: black; border-bottom-color: transparent; border-left-color: transparent;}
}
.guess::after {content: ""; position: absolute; top: -0.1vw; left: -0.1vw; width: 0; height: 0; background: transparent; border: 0.2vw solid transparent;}
.guess:hover::after {animation: animates 1s linear forwards; }
@keyframes animates {
0% {width: 0; height: 0; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: black; }
50% { width: 0; height: 100%;border-top-color: transparent; border-right-color: transparent; border-bottom-color: black; border-left-color: black; }
100% {width: 100%; height: 100%; border-top-color: transparent; border-right-color: transparent; border-bottom-color: black; border-left-color: black; }
</style>
<style>
.box_a {position: relative; width: 60vw; height: 40vw; margin: 0 auto; background: rgba(0, 0, 0, 0.4); display: flex; overflow: hidden; border-radius: 1vw; justify-content: center; align-items: center;
-webkit-border-radius: 1vw; -moz-border-radius: 1vw; -ms-border-radius: 1vw; -o-border-radius: 1vw;}
.box_a::after {position: absolute; content: ""; inset: 0.4vw; border-radius: 1vw; background: #1d1f5c; -webkit-border-radius: 1vw;}
-moz-border-radius: 1vw; -ms-border-radius: 1vw; -o-border-radius: 1vw;}
.box_a::before {content: ""; position: absolute; width: 14vw; height: 130%; background: linear-gradient(black, yellow, red); animation: rotate 3s infinite linear; -webkit-animation: rotate 3s infinite linear;}
@keyframes rotate {
0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform:
rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg);}
100% { transform: rotate(360deg); -webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg); -ms-transform: rotate(360deg);
-o-transform: rotate(360deg);}
}
.box_a h3 {font-size: 8vw; color: #fff; z-index: 10;}
</style>
<div class="box_a">
<h3>97</h3>
</div>
<style>
.block {position: relative; margin: 3vw auto 0; width: 30vw; height: 25vw; background: linear-gradient(0deg, #000, #272727);}
.block:before, .block:after {content: ''; position: absolute;left: -0.2vw; top: -0.2vw;background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, #0000ff,
#00ff00,#ffff00, #ff0000); background-size: 400%; width: calc(100% + 0.4vw); height: calc(100% + 0.4vw); z-index: -1; animation: steam 20s linear infinite;}
@keyframes steam {
0% {background-position: 0 0;}
50% {background-position: 400% 0;}
100% {background-position: 0 0; }
}
.block:after {filter: blur(5vw);}
</style>
<div>
<div class="block"></div>
</div>
<style>
.wrapper {padding-top: 10vw; width: 40vw; height: 20vw; margin: 0 auto; position: relative; overflow: hidden;}
.main-element {position: absolute; top: 1%; left: 1%; display: block; height: 98%; width: 98%; margin: auto; align-self:center; background: #fff; z-index: 1;}
.border {position: absolute; display: block; top: -50%; left: -50%; z-index: -9; display: block; height: 200%; width: 200%; transform: rotate(-45deg); overflow: hidden;
background: linear-gradient(to right, #fff 20%, #fff 40%, #ECD08C 50%, #ECD08C 55%, #fff 70%, #fff 100%); background-size: 200% auto; animation: shine 3s linear infinite;}
/*Begin shimmer code*/
@keyframes shine {
to { background-position: 200% center; }
}
</style>
<div>
<div class="wrapper">
<div class="border"></div>
<div class="main-element"></div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet at error, facilis nesciunt officiis perspiciatis repudiandae voluptates voluptatibus? Aperiam atque consectetur esse excepturi explicabo facilis labore magnam provident unde vitae.
<style>
@keyframes bg {
0% {background-size: 0 1vw, 1vw 0, 0 1vw, 1vw 0;}
25% {background-size: 100% 1vw, 1vw 0, 0 1vw, 1vw 0;}
50% {background-size: 100% 1vw, 1vw 100%, 0 1vw, 1vw 0;}
75% {background-size: 100% 1vw, 1vw 100%, 100% 1vw, 1vw 0;}
100% {background-size: 100% 1vw, 1vw 100%, 100% 1vw, 1vw 100%;}
}
div.one {width: 50%; margin: 2vw auto; padding: 2vw; background-repeat: no-repeat; background-image: linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%),
linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%), linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%), linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%);
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; background-position: 0 0, 100% 0, 100% 100%, 0 100%;animation: bg 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1;
animation-play-state: paused; }
div.one:hover {animation-play-state: running;}
</style>
<div>
<div class="one">
<h3>Hover me!</h3>
<p class="spec">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet at
error, facilis nesciunt officiis perspiciatis repudiandae voluptates voluptatibus?
Aperiam atque consectetur esse excepturi explicabo facilis labore magnam provident
unde vitae.</p>
</div>
</div>
<div class="spec">
<h3>A heading with a solid red border</h3>
<h4>A heading with a dotted blue border</h4>
<div class="test">A div element with a double border.</div>
</div>
<style>
h3 {border: 0.25vw solid red;}
h4 {border: 0.3vw dotted blue;}
div .test {border: double;}
</style>
<div class="spec">
<h3 class="bottom1">A heading with a solid red bottom border</h3>
<h4 class="bottom2">A heading with a dotted blue bottom border</h4>
<div class="bottom3">A div element with a double bottom border.</div>
</div>
<style>
.bottom1 {border-bottom: 0.25vw solid red;}
.bottom2 {border-bottom: 0.3vw dotted blue;}
.bottom3 {border-bottom: double;}
</style>
<div class="spec">
<h3 class="bottom21">A heading with a solid red bottom border</h3>
<h4 class="bottom22">A heading with a dotted blue bottom border</h4>
<div class="bottom23">A div element with a double bottom border.</div>
</div>
<style>
.bottom21 {border: 0.25vw solid red;border-bottom-left-radius:1.5vw;}
.bottom22 {border: 0.3vw dotted blue;border-bottom-left-radius:1.5vw;}
.bottom23 {border: double;border-bottom-left-radius:1.5vw;}
</style>
<div class="spec">
<h3 class="bottom24">A heading with a thin border</h3>
<h4 class="bottom25">A heading with a thick border</h4>
<div class="bottom26">A div element with a medium border.</div>
</div>
<style>
.bottom24 {border-style: solid; border-width:thin}
.bottom25 {border-style: dotted; border-width: thick;}
.bottom26 {border-style: dashed; border-width: medium;}
</style>
<h3 style="border-color : red ; border-style : solid ; border-width : 0">
fitst approach - some text</h3>
<h3 style="border-color : red ; border-style : solid ;">first approach
- some other text</h3>
<h3 style="border-color : green ; border-style : solid ; border : 0">
second approach - some text</h3>
<h3 style="border-color : green ; border-style : solid ;">second approach
- some more text</h3>
<h3 style="border-color : green ; border-style : solid ; border : none">
third approach - some text</h3>
<h3 style="border-color : green ; border-style : solid ;">third approach
- some more text</h3>
<div class="my-element">...</div>
<div>test</div>
<style c lass="spec">
.my-element:hover {border-bottom: 1px solid black;}
.my-element {height: 18px; box-sizing: border-box; }
</style>
<div class="transparent-shadow">
<div class="margin-right">
<div class="margin-bottom align-center">box-shadow</div>
<img class="box-shadow" src="../images/smiley.png" alt="box-shadow example (transparent)" dtyle="width: 10vw; height: 10vw;">
</div>
<div>
<div class="margin-bottom align-center">drop-shadow</div>
<img class="drop-shadow" src="../images/smiley.png" alt="drop-shadow example (transparent)" style="width: 10vw; height: 10vw;">
</div>
</div>
<style>
.transparent-shadow {height: 30vw; display: flex; align-items: center; justify-content: center;}
.margin-right { margin-right: 2vw;}
.margin-bottom { margin-bottom: 1vw;}
.align-center {text-align: center;}
.box-shadow {box-shadow: .4vw .8vw 1.6vw red;}
.drop-shadow {filter: drop-shadow(.4vw .8vw 1.6vw red);}
</style>
The key to success is to start before you're ready.— Marie Forleo
<div>
<div id="box1" class="box">Box1</div>
<div id="box2" class="box">Box2</div>
<div id="box3" class="box">Box3</div>
<blockquote>
<q>The key to success is to start before you're ready.</q>
<p>— Marie Forleo</p>
</blockquote>
</div>
<style>
p {padding: 1vw;}
.box {padding: 2vw; width: 50%; margin: 3vw auto; background: #000; color: #fff;}
#box1 {box-shadow: .6vw 1.2vw yellow;}
#box2 {box-shadow: .6vw 1.2vw .4vw .8vw red;}
#box3 {box-shadow: .6vw 1.2vw .2vw .2vw blue, -.6vw -1.2vw .2vw .2vw green;}
blockquote {width: 50%; margin: 5vw auto; padding: 2vw; font-size: 2vw; box-shadow: inset 1vw .5vw 2.5vw .5vw black, .5vw .5vw 1.2vw .2vw black;}
</style>
<div class="shape-img">
<img class="box-shadow-2" src="shape.svg" alt="">
<img class="drop-shadow-2" src="shape.svg" alt="">
</div>
<style>
.shape-img img {display: inline-block; height: 13vw; width: 13vw; margin-left: 20vw;}
.box-shadow-2 {color: red;box-shadow: 0.6vw 0.6vw 0.2vw;}
.drop-shadow-2 {filter: drop-shadow(0.6vw 0.6vw 0.2vw);}
</style>
<div class="my-div">
<div class="box_b"></div>
<div class="box_c"></div>
</div>
<style>
.my-div{margin-left: 20vw; height: 15vw; width: 15vw; display: flex; flex-flow: row nowrap; justify-content: space-around;}
.box_b{width: 15vw; height: 15vw; gap: 1vw; box-shadow: 0vw .5vw 1vw 0vw skyblue;background-color: burlywood;}
.box_c{width: 15vw; height: 15vw; gap: 1vw; box-shadow: 0vw .5vw 1vw 0vw skyblue;background-color: lightgreen;}
.box_b:hover{box-shadow: 0vw 1vw 0vw 2vw rgba(0, 0, 0, 0.5); transform: translateY(-1vw);}
.box_c:hover{background-color: white; box-shadow: inset 0vw 1vw 2vw .2vw rgba(0, 0, 0, 0.5) ; transform: translateX(1vw);}
</style>
<div class="neon">
<div class=box6></div>
<div class=box7></div>
</div>
<style>
.neon {height: 30vw; width: 100%; background: #2c2c2c; display: flex; justify-content: center; align-items: center;margin-left: 10vw;}
.box6, .box7{height: 10vw; width: 10vw; background: #2c2c2c; border-radius: 1.5vw; margin: 2vw; transition: all ease 0.2s;
border: .1vw solid #333;}
.box6 {box-shadow: 0vw .5vw 1vw 0vw rgba(0,255,255,0.7);}
.box7 {box-shadow: inset 0vw .5vw 1vw 0vw rgba(0,255,255,0.7);}
.box6:hover{transform: translateY(-.5vw); box-shadow: 0vw 1vw 2vw .2vw rgba(0,255,255,0.7);}
.box7:hover{transform: translateY(.5vw); box-shadow: inset 0vw 1vw 2vw .2vw rgba(0,255,255,0.7);}
</style>